<%@ page import="java.util.List" %>
<%@ page import="com.hui.entity.Student" %><%--
  Created by IntelliJ IDEA.
  User: oddDog
  Date: 2021/6/19
  Time: 16:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body style="padding-left: 30px">
    <h1>亲爱的<%=session.getAttribute("name")%>  ，欢迎您！</h1><br>

    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="add">添加</button>
    <button id="select" class="btn btn-default">查询</button>
    <input id="selectText" type="text" placeholder="请输入学号">

    <!-- 表格开始 -->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>备注信息</th>
            </tr>
        </thead>
        <tbody>
            <%
                List<Student> studentList = (List<Student>) session.getAttribute("studentList");
                for (Student student : studentList) {
            %>
            <tr>
                <td><%=student.getId()%></td>
                <td><%=student.getName()%></td>
                <td><%=student.getGender().equals("1")?"男":"女"%></td>
                <td><%=student.getBirthday()%></td>
                <td><%=student.getEmail()%></td>
                <td><%=student.getDesc()%></td>
                <td>
                    <button class="btn btn-warning update" data-toggle="modal" data-target="#myModal" >修改</button>
                    <button class="btn btn-danger delete">删除</button>
                </td>
            </tr>
            <%
                }
            %>
        </tbody>
    </table>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <%
        int curr = 1;  // 当前页
        int total = (int)session.getAttribute("totalPage"); // 总页数
    %>
    <nav aria-label="Page navigation">

        <ul class="pagination">
            <%--     上一页       --%>
            <li>
                <a href="pageStudent?page=<%=curr>1?--curr:curr%>" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <%--     循环显示所有页码       --%>
            <%
                for(int i=1;i<=total;i++){
                    if(i==curr){

            %>
                <li class="active"><a href="pageStudent?page=<%=i%>"><%=i%></a></li>
            <%
                }else{
            %>
                <li><a href="pageStudent?page=<%=i%>"><%=i%></a></li>
            <%
                }
            %>
            <%
                }
            %>
            <%--     下一页       --%>
            <li>
                <a href="pageStudent?page=<%=curr<total?++curr:curr%>" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li>
                <span aria-hidden="true">总共<%=total%>页</span>
            </li>
        </ul>
    </nav>
    <!-- 分页结束 -->

    <!-- 添加模态框开始 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title" id="title"></h4>
                </div>
                <form action="insertAndUpdate" method="post" id="frm">
                    <div class="modal-body">
                        <input type="hidden" name="id" id="frm_id">
                        姓&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" name="name" id="frm_name"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        性&nbsp;&nbsp;别&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="gender"  value="1">男 <input type="radio" name="gender" value="0">女
                        <br><br>
                        生&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" name="birthday" id="frm_birthday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        邮&nbsp;&nbsp;箱&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="text" name="email" id="frm_email">
                        <br><br>
                        备&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;
                        <textarea name="desc" id="frm_desc"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" >保存</button>
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 添加模态框结束 -->

<script>
    $(function(){
        $(".currPage").click(function(event){
            console.log( event.currentTarget)
            // event.currentTarget.addClass("active")
        })
        // 添加
        $("#add").click(function(){
            $("#title").html("添加学员")
            // 清空模态框中的数据
            $("#frm_id").val("")
            $("#frm_name").val("")
            $('input:radio:first').prop('checked', true);
            $("#frm_birthday").val("")
            $("#frm_email").val("")
            $("#frm_desc").val("")
        })

        // 修改
        $(".update").click(function(event){
            $("#title").html("修改学员")
            // 获取所在行的数据
            let tds = event.currentTarget.parentElement.parentElement.getElementsByTagName("td")
            // 将所在行的数据填充到模态框中
            $("#frm_id").val(tds[0].innerText)
            $("#frm_name").val(tds[1].innerText)
            if(tds[2].innerText==="男"){
                $('input:radio:first').prop('checked', true);
            }else {
                $('input:radio:last').prop('checked', true);
            }
            $("#frm_birthday").val(tds[3].innerText)
            $("#frm_email").val(tds[4].innerText)
            $("#frm_desc").val(tds[5].innerText)
        })

        // 删除
        $(".delete").click(function(event){
            // 获取所在行对应的id
            let id = event.currentTarget.parentElement.parentElement.getElementsByTagName("td")[0].innerText
            if(confirm("你确定要删除学号为"+id+"的学员吗")){
                window.location.href="delete?id="+id
            }
        })

        //查询
        $("#select").click(function(){
            // 获取查询的数据
            let val = $("#selectText").val().trim();
            if(val===""){
                window.location.href="pageStudent"
            }else if(!/^\d+$/.test(val)){
                alert("请输入正确数字！！！")
            } else{
                window.location.href="selectStudent?id="+val
            }

        })
    })
</script>
</body>
</html>
